<template>
	<view>
		<r-navbar title="列表页" />
        <view class="list-wrap">
            <r-list ref="houseList" :loading="loading" :dataSource="houseList" :downing="downing"
                :pullEnable="true" :lasting="isFinish" emptyTitle="暂无相关信息"
                v-model="pulling" @onPulling="onPulling" @onDowning="onDowning" v-slot="{item,index}">
                <template>
                    <view class='list-item' @tap='onTurnDetail(item)'>
                        {{item}}
                    </view>
                </template>
            </r-list>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				houseList: [
                    1,2,3,4,5,6,7,8,9,10
                ],
                current: 1,
                isFinish: false,
                loading: true,
                pulling: false,
                downing: false,
			}
		},
        onLoad() {
          setTimeout(()=>{
              this.loading = false;
              this.pulling = false;
              this.downing = false;
          },1000)  
        },
		methods: {
			onTurnDetail: function(e){
                console.log(e)
            },
            
            onPulling: function() {
                this.pulling = true;
                this.submit()
            },
            onDowning: function() {
                if (this.isFinish) return;
                this.downing = true;
                console.log()
                this.current += 1;
                this.submit(this.current)
            },
            submit: function(current=1){
                console.log(current)
                setTimeout(()=>{
                    this.loading = false;
                    this.pulling = false;
                    this.downing = false;
                    this.current = current;
                },1000)
            }
		}
	}
</script>

<style scoped>
    .list-item{
        height: 185rpx;
        margin: 40rpx 10rpx;
        padding: 10rpx 20rpx;
        border-radius: 18rpx;
        border: #808080 2rpx solid;
    }
    .list-wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - 127rpx);
	}
</style>
